<template>
	<view class="index-box" v-if="orderInfo.pk_id">
		<state-detail :orderInfo="orderInfo"></state-detail>
		<view class="box"><prod-list :orderInfo="orderInfo"></prod-list></view>
		<view class="box"><order-base :orderInfo="orderInfo"></order-base></view>
		<view class="box no_bg" v-if="orderInfo.pay_status != 1"><bottom-button :orderInfo="orderInfo"></bottom-button></view>
	</view>
</template>
<script>
import stateDetail from './components/state-detail.vue';
import prodList from './components/prodList.vue';
import orderBase from './components/order-base.vue';
import bottomButton from './components/bottom-button.vue';
import { getMoment } from '@/utils/moment';

export default {
	components: {
		stateDetail,
		prodList,
		orderBase,
		bottomButton
	},
	data() {
		return {
			orderInfo: {
				pk_id: ''
			},
			init: false
		};
	},
	onLoad: function(options) {
		if (options.id) {
			this.initPage(Number(options.id));
		}
	},
	onShow() {
		if (this.init) {
			this.initPage(Number(options.id));
		}else{
			this.init = true;
		}
	},
	methods: {
		// 初始化,子组件也会调用
		initPage(pk_id) {
			this.$loading();
			this.$resPost('GetOrderDetailedInfo', { pk_id: pk_id })
				.then(({ data }) => {
					this.$hide();
					let nowTime = new Date().getTime();
					let time = getMoment(data.date_creation, 'YYYY/MM/DD HH:mm:ss');
					if (data.pay_status == '0' && nowTime - time >= 2 * 60 * 60 * 1000) {
						data.pay_status = '-1';
					}
					this.orderInfo = data;
				})
				.catch(() => this.$hide());
		}
	}
};
</script>
<style lang="scss">
page {
	background-color: $www-theme-bg;
}
</style>
<style lang="scss" scoped>
.box {
	background-color: #ffffff;
	padding: 0 24rpx;
	margin-top: 20rpx;
	&.no_bg {
		background-color: transpartent;
	}
}
</style>
